<template>
  <div class="user-avatar">
    <el-upload
        class="avatar-uploader"
        action=""
        :auto-upload="false"
        :show-file-list="false"
        :on-change="handleCrop">
      <el-avatar v-if="circleUrl" :size="avatarSize.size" :src="circleUrl" alt="用户头像" :key="circleUrl">
        <i class="el-icon-plus avatar-uploader-icon"
           :style="{width:avatarSize.width,height:avatarSize.height,'line-height':avatarSize.lineHeight,'font-size':avatarSize.fontSize}"/>
      </el-avatar>
      <i v-else class="el-icon-plus avatar-uploader-icon"
         :style="{width:avatarSize.width,height:avatarSize.height,'line-height':avatarSize.lineHeight,'font-size':avatarSize.fontSize}"/>
    </el-upload>
    <!-- 剪裁组件弹窗 -->
    <el-dialog :title="title" :visible.sync="cropperModel" width="800px">
      <cropper ref="cropper" :options="options" @upload="uploadImage">
      </cropper>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
import {fileUpload} from '@/api/file';
import Cropper from '@/components/UserAvatar/Cropper.vue';

@Component({
  components: {
    Cropper
  }
})
export default class UserAvatar extends Vue {
  @Prop() private circleUrl!: string;
  @Prop({type: [String, Number], default: 'auto'}) private size!: string | number;
  cropperModel = false; // 剪裁组件弹窗开关
  title = '修改头像';

  get avatarSize() {
    const avatarSize: any = {};
    if (this.size === 'auto') {
      avatarSize.width = '100%';
      avatarSize.height = '100%';
      avatarSize.lineHeight = '100%';
      avatarSize.fontSize = '100%';
      avatarSize.size = 'large';
    } else {
      avatarSize.width = this.size + 'px';
      avatarSize.height = this.size + 'px';
      avatarSize.lineHeight = this.size + 'px';
      if (typeof this.size === 'number') {
        avatarSize.fontSize = (this.size / 6) + 'px';
        avatarSize.size = this.size;
      } else {
        avatarSize.fontSize = '100%';
        avatarSize.size = 'large';
      }
    }
    return avatarSize;
  }


  private options: any = {
    img: '', //裁剪图片的地址
    autoCrop: true, // 是否默认生成截图框
    autoCropWidth: 200, // 默认生成截图框宽度
    autoCropHeight: 200, // 默认生成截图框高度
    fixedBox: true // 固定截图框大小 不允许改变
  };


  handleCrop(file: any, files: any) {
    // 点击弹出剪裁框
    file = file.raw;
    this.options.img = window.URL.createObjectURL(new Blob([file], {type: file.type}));
    this.cropperModel = true;
  }

  uploadImage(data: any) {
    fileUpload(data).then((res: any) => {
      this.cropperModel = false;
      this.handleAvatarSuccess(res);
    }).catch((e) => {
      console.log(e);
    });
  }


  beforeClose(done) {
    this.cropperModel = false;
  }


  @Emit('handleAvatarSuccess')
  handleAvatarSuccess(res: any) {
    return res;
  }
}
</script>

<style lang="scss">
.user-avatar {
  .avatar-uploader {

    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      text-align: center;
    }
  }
}

</style>

